<template>
  <div>
    <el-dialog
      :title="title"
      :visible="true"
      :show-close="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="90%">
      <div class="content">
        <div class="detail">
          <div><span class="content-one">{{$t('cExport.shippingDate')}}:</span> <span class="content-two"> {{signObj.shippingDate | changeDate}}</span></div>
          <div><span class="content-one">{{$t('cArroval.aog')}}:</span> <span class="content-two"> {{signObj.aog}}</span></div>
          <div><span class="content-one">{{$t('cExport.mainWaybillNumber')}}:</span> <span class="content-two"> {{signObj.mainWaybillNumber}}</span></div>
          <div><span class="content-one">{{$t('cExport.shipping')}}:</span> <span class="content-two"> {{signObj.waybillNumber}}</span></div>
          <div><span class="content-one">{{$t('cExport.company')}}:</span> <span class="content-two"> {{signObj.purchaser}}</span></div>
          <div><span class="content-one">{{$t('cTransportSearch.receivePeople')}}:</span> <span class="content-two"> {{signObj.receiver}}</span></div>
          <div><span class="content-one">{{$t('cExport.flightDate')}}:</span> <span class="content-two"> {{signObj.flightDate |changeDate}}</span></div>
          <div><span class="content-one">{{$t('cExport.arrivalDate')}}:</span> <span class="content-two"> {{signObj.arrivalDate | changeDate}}</span></div>
          <div><span class="content-one">{{$t('cExport.originHarbor')}}:</span> <span class="content-two"> {{signObj.originHarbor}}</span></div>
          <div><span class="content-one">{{$t('cExport.port')}}:</span> <span class="content-two"> {{signObj.destinationHarbor}}</span></div>
          <div class="content-last"><span class="content-one">{{$t('cExport.receiving')}}:</span> <span class="content-two"> {{signObj.address}}</span></div>
        </div>
        <!-- 折叠面板 -->
        <div class="content-center" v-if="signObj.shipmentNumberList">
          <el-collapse v-model="activeNames">
            <!-- 装箱单号 -->
            <el-collapse-item :title="`${$t('cExport.packing')}: ${item.shipmentNumber}`" :name="index" v-for="(item,index) in signObj.shipmentNumberList" :key="index">
              <div class="shipment">
                <div><span>{{$t('cExport.allBox')}}: {{item.totalBoxes}}</span> <span>{{$t('cExport.allCount')}}: {{item.totalShippedQuantity}}</span></div>
                <div><span>{{$t('cExport.allGross')}}: {{item.totalBoxWeight}}</span> <span>{{$t('cExport.allPrice')}}: {{item.totalDeclaredValue}}</span></div>
              </div>
              <!-- 货物列表详情 -->
              <div class="listDetail" v-if="item.detailsList && item.detailsList.length !== 0">
                <div class="top" @click="handleListDetail">
                  <span style="font-size:15px;font-weight: bold;">{{$t('cExport.exportList')}}</span>
                  <i v-if="!listDetail" class="el-icon-arrow-down" style="font-size: 5vw;padding-left: 2.778vw"></i>
                  <i v-else class="el-icon-arrow-up" style="font-size: 5vw;padding-left: 2.778vw"></i>
                </div>
                <div class="bottom" v-if="!listDetail">
                  <div class="box">
                    <div class="box-content" v-for="(item1,index) in item.detailsList" :key="index">
                      <div class="box-content-text">
                        <span>{{$t('cExport.boxNum')}}: <span>{{item1.boxNumber}}</span></span>
                        <span>{{$t('cExport.contract')}}: {{item1.contractNo}}</span>
                      </div>
                      <div class="box-content-text">
                        <span>{{$t('cExport.contarctType')}}: {{item1.contarctType}}</span>
                        <span>{{$t('cExport.purchasingClerk')}}: {{item1.purchasingClerk}}</span>
                      </div>
                      <div class="box-content-text">
                        <span>{{$t('cTransportSearch.partNum')}}: {{item1.partNumber}}</span>
                        <span>{{$t('cTransportSearch.serialNum')}}: {{item1.serialNumber}}</span>
                      </div>
                      <div class="box-content-text">
                        <span>{{$t('cExport.chineseName')}}: {{item1.chnCargoName}}</span>
                        <span>{{$t('cExport.englishName')}}: {{item1.engCargoName}}</span>
                      </div>
                      <div class="box-content-text">
                        <span>{{$t('cExport.shippedQuantity')}}: {{item1.shippedQuantity}}</span>
                        <span>{{$t('cTransportSearch.danger')}}: {{item1.dangerousGoods}}</span>
                      </div>
                      <div class="box-content-text">
                        <span>{{$t('cExport.weight')}}: {{item1.netWeight}}</span>
                        <span>{{$t('cExport.price')}}: {{item1.declaredValue}}</span>
                      </div>
                      <div class="box-content-text">
                        <span>{{$t('cExport.currency')}}: {{item1.currency}}</span>
                        <span>{{$t('cTransportSearch.size')}}: {{signObj.size}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="bottomBtn">
        <el-button plain @click="handleCancel">{{$t('btn.cancelSign')}}</el-button>
        <el-button type="primary" plain @click="handleOk">{{$t('btn.okSign')}}</el-button>
      </div>
    </el-dialog>
    <sign-ok v-if="isShow" :signObj="signObj" @handleClose="handleClose"></sign-ok>
  </div>
</template>

<script>
import signOk from "@/views/export/components/signOk"
export default {
  props: {
    signObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      activeNames: [],
      listDetail: false,
      isShow: false
    }
  },
  components: {
    signOk
  },
  methods: {
    handleListDetail() {
      this.listDetail = !this.listDetail
    },
    // 取消
    handleCancel() {
      this.$emit('handleCancel')
    },
    // 确认签收
    handleOk() {
      if(this.signObj.status != '6') return this.$msg.fail(this.$t('message.noSing'))
      this.isShow = true
    },
    // 关闭弹框
    handleClose(value) {
      this.isShow = false
      if (value === 1) this.$emit('handleCancel')
    }
  },
  created() {
    this.title = `${this.$t('cExport.waybill')}: ${this.signObj.mainWaybillNumber}-${this.signObj.waybillNumber}`
  },
  mounted() {
    const index = this.signObj.shipmentNumberList.length
    if (index !== 0) {
      for (let i = index; index < 0;i--) {
        this.activeNames.push(i)
      }
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__header {
  padding: 10px 20px 10px 10px;
}
/deep/.el-dialog__body {
  padding: 0 10px;
}
/deep/.el-dialog {
  margin-top: 8vh !important;
}
/deep/.el-dialog__header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.el-collapse-item__header {
  font-weight: bold;
  font-size: 15px;
}
/* 详情 */
.detail {
  border-bottom: 0.278vw dashed #797979;
}
.content-one {
  font-weight: bold;
  color: black;
}
.content-last {
  display: flex;
}
.content-last .content-one {
  flex: 2;
}
.content-last .content-two {
  padding-left: 1px;
  flex: 6;
}
.content-two {
  padding-left: 3px;
}
/* 折叠面板 */
.content {
  width: 100%;
  height: 65vh;
  overflow-y: scroll;
}
/* 装箱单号 */
.shipment div {
  display: flex;
}
.shipment div span {
  flex: 1;
}
/* 货物列表详情 */
.listDetail .top {
  margin: 2.778vw 0;
}
.box {
  padding: 0 2.778vw;
  border: 1px solid #797979;
  border-radius: 5px;
}
.box-content {
  padding: 2.778vw 0;
  border-bottom: 0.278vw dashed #797979;
}
.box-content:last-child {
  border-bottom: 0;
}
.box-content-text {
  display: flex;
}
.box-content-text span {
  flex: 1;
}
/* 按钮 */
.bottomBtn {
  display: flex;
  justify-content: space-between;
}
</style>
